<template>
  <ul class="todo-main">
    <!-- 第四步：在模板中用v-for遍历数组，并设置key，再把遍历得到数组中的每一项传给item组件，如果v-bind不加冒号，代表批量传递，就是把对象展开再传递 -->
      <Item v-for="todo in todoList" :key="todo.id" v-bind="todo" :singleCheckHandle='singleCheckHandle'
      :deleteSingleHandle="deleteSingleHandle"
      /> 
      
  </ul>
</template>

<script>
import Item from './Item'
export default {
    name:'List',
    components:{
        Item
    },
    // 第三步：在子组件中通过props配置项接收数组
    props:['todoList','singleCheckHandle','deleteSingleHandle']
}
</script>

<style scoped>
/*main*/
.todo-main {
  margin-left: 0px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0px;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>